<%--
    Document   : index.jsp
    Created on : 28/08/2009, 11:25:19 AM
    Author     : Administrador
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <link type="text/css" href="${pageContext.servletConfig.servletContext.contextPath}/themes/base/ui.all.css" rel="stylesheet" />
		<script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/librerias/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/ui/ui.core.js"></script>
		<script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/ui/ui.draggable.js"></script>
		<script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/ui/ui.droppable.js"></script>
		<script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/ui/ui.resizable.js"></script>
		<script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/ui/ui.dialog.js"></script>
        <link type="text/css" href="${pageContext.servletConfig.servletContext.contextPath}/css/demos.css" rel="stylesheet" />
        <link type="text/css" href="${pageContext.servletConfig.servletContext.contextPath}/css/estilo.css" rel="stylesheet" />
		<link type="text/css" href="${pageContext.servletConfig.servletContext.contextPath}/css/estiloDG.css" rel="stylesheet" />
		<script src="${pageContext.servletConfig.servletContext.contextPath}/scripts/DragAndDrop.js"  type="text/javascript"></script>
        <style type="text/css">@import url(jscalendar/calendar-win2k-1.css);</style>
        <script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/jscalendar/calendar.js"></script>
        <script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/jscalendar/lang/calendar-en.js"></script>
        <script type="text/javascript" src="${pageContext.servletConfig.servletContext.contextPath}/jscalendar/calendar-setup.js"></script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Eventos Espol</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <label>Eventos Espol</label>
                <div class="cerrarSesion">
                    <a href="Controller?opcion=cerrarSesion">Cerrar Sesión</a>
                </div>
            </div>

            <div class="informacion">

                <div class="titulo">
                    <h2>Wish List</h2>
                </div>

                <div class="contenedorMenu">
                        <%@include file="menu.jsp" %>
                </div>

                <div id="wl" class="informacion2">

                <div id="sidebar">
                    <div id="calendar">
                        <div id="calendar-container"></div>


                            <script type="text/javascript">

                                function dateChanged(calendar) {
                                // Beware that this function is called even if the end-user only
                                // changed the month/year.  In order to determine if a date was
                                // clicked you can use the dateClicked property of the calendar:
                                        if (calendar.dateClicked) {
                                        // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
                                        var y = calendar.date.getFullYear();
                                        var m = calendar.date.getMonth()+1;     // integer, 0..11
                                        var d = calendar.date.getDate();      // integer, 1..31

                                        switch(m){
                                          case 1: n="Enero"; break;
                                          case 2: n="Febrero";break;
                                          case 3: n="Marzo";break;
                                          case 4: n="Abril";break;
                                          case 5: n="Mayo";break;
                                          case 6: n="Junio";break;
                                          case 7: n="Julio";break;
                                          case 8: n="Agosto";break;
                                          case 9: n="Septiembre";break;
                                          case 10: n="Octubre";break;
                                          case 11: n="Noviembre";break;
                                          case 12: n="Diciembre";break;
                                        }
                                        var xdia = document.getElementById("contTareasXdia");
                                        while(xdia.hasChildNodes())
                                        {
                                               xdia.removeChild(xdia.firstChild);
                                        }
                                        <c:forEach var="descrip" items="${fechasTareas}" >
                                        var des = '<c:out value="${descrip.nombre}"/>';
                                        var diaTarea = '<c:out value="${descrip.fechaInicio.date}"/>';
                                        var mesTarea = '<c:out value="${descrip.fechaInicio.month+1}"/>';
                                        var anioTarea = '<c:out value="${descrip.fechaInicio.year+1900}"/>';

                                        var nodo1 = document.createTextNode(des);
                                        var espacio=document.createElement("br");


                                        if(dateIsSpecial(y, m-1, d)==true && diaTarea==d && mesTarea==m && anioTarea==y)
                                        {

                                             xdia.appendChild(nodo1);
                                             xdia.appendChild(espacio);
                                        }
                                        </c:forEach>
                                     // alert(d+" de "+n+", "+y+"\n"+des);
                                    }
                                }
                                  function dateIsSpecial(year, month, day) {
                                    var cont=0;
                                    <c:forEach var="fechas" items="${fechasTareas}" >
                                        var diaTarea = '<c:out value="${fechas.fechaInicio.date}"/>';
                                        var mesTarea = '<c:out value="${fechas.fechaInicio.month+1}"/>';
                                        var anioTarea = '<c:out value="${fechas.fechaInicio.year+1900}"/>';

                                        if(mesTarea==month+1 && diaTarea==day && anioTarea==year){
                                            cont = cont+1;
                                        }
                                    </c:forEach>
                                        if(cont!=0)return true;
                                        else return false;

                                };

                                function ourDateStatusFunc(date, y, m, d) {
                                        //if (dateIsSpecial(y, m, d))
                                        if (dateIsSpecial(y, m, d))
                                            return "special";
                                        else
                                            return false;
                                };

                                Calendar.setup(
                                {
                                    flat         : "calendar-container", // ID of the parent element
                                    flatCallback : dateChanged,           // our callback function
                                    dateStatusFunc : ourDateStatusFunc
                                }
                                );
                            </script>

                    </div>

                    <div id="tareasXdia">
                        <h4 class="titulo">Tareas del Día</h4>
                        <div id="contTareasXdia">
                        </div>
                    </div>

                    </div>

                    <div id="listaOrigen" class="demo ui-widget ui-helper-clearfix">
                        <div class="ui-widget-content ui-state-default">
                        <h4 class="ui-widget-header"><span class="ui-icon ui-icon-note"></span> Tareas Pendientes</h4>
                        <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
                            <c:forEach var="tarea" items="${tareasPendientes}" >

                                <li class="ui-widget-content ui-corner-tr">
                                    <h5 class="ui-widget-header">Tarea ${tarea.idTarea}</h5>
                                    <p>${tarea.nombre}</p>
                                </li>
                            </c:forEach>
                        </ul>

                    </div>
                    </div>

                    <div id="d" class="demo ui-widget ui-helper-clearfix">
                        <div id="trash" class="ui-widget-content ui-state-default">
                            <h4 class="ui-widget-header"><span class="ui-icon ui-icon-document">Trash</span> Wishlist</h4>
                        </div>
                    </div><!-- End demo -->
                </div>
              </div>
            <div class="footer">
                <a href="#">Contactenos</a>
            </div>
         </div>
    </body>
</html>
